{% extends 'base.html' %}
{% block title %}舌照质量筛选-对焦质量与舌位质量{% endblock %}
{% block css_and_js -%}
{{ super() }}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/css/bootstrap-slider.min.css">
    <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/bootstrap-slider.min.js"></script>
    <style>
        body {text-align: center}
        .row {margin-top: 10px; margin-bottom: 10px}
        [class|="col"] {padding-top: 10px; padding-bottom: 10px}
        .panel-heading {font-size: 200%}
        label {margin: 20px; font-size: 150%}
        .slider {margin: 28px}
        .btn {width: 200px}
    </style>
    <script>
        $(function () {
            // 初始化滑动条
            var curFocus;
            $("input[type='text']").slider().each(function () {
                var input = $(this);
                input.parent()
                    .mouseover(function () {curFocus = input;})
                    .mouseleave(function () {curFocus = undefined;})
            });

            // 鼠标滚轮操作
            document.onmousewheel = function (e) {
                if (curFocus) {
                    curFocus.slider('setValue', curFocus.slider('getValue') + ((e.deltaY > 0) ? 1 : - 1));
                    return false;
                }
            };

            // 键盘操作
            document.onkeypress = function(event) {
                switch (event.key) {
                    case "q": {$("input[name='focus']").slider('setValue', 0); break;}
                    case "w": {$("input[name='focus']").slider('setValue', 1); break;}
                    case "e": {$("input[name='focus']").slider('setValue', 2); break;}
                    case "a": {$("input[name='position']").slider('setValue', 0); break;}
                    case "s": {$("input[name='position']").slider('setValue', 1); break;}
                    case "d": {$("input[name='position']").slider('setValue', 2); break;}
                    case "Enter": {$("form").submit();}
                }
            };
        });
    </script>
{% endblock %}
{% block nav %}
    <div class="navbar navbar-inverse" role="navigation" style="margin-bottom: 0">
        <div class="container">
            <div class="navbar-header navbar-brand">舌照质量筛选</div>
            <div class="navbar-header navbar-brand" style="margin-left: 5em">{{ data['file_name'] }}.jpg</div>
            <div class="navbar-right navbar-brand" style="margin-right: 2em">#{{ data['id'] }}</div>
        </div>
    </div>
{%- endblock %}
{% block main %}
    <div class="row">
        <div class="col-sm-6" style="border-right: 1px solid lightgray">
            <div class="text-right">
                <img src="{{ url_for('.image', file_name=data['file_name']) }}" class="img-rounded" style="height: 600px">
            </div>
        </div>
        <div class="col-sm-3">
            <form action="{{ url_for('.confirm', page='focus_position') }}">
                <div class="panel panel-default">
                    <div class="panel-heading">舌照质量</div>
                    <div class="panel-body">
                        <label>
                            对焦质量
                            <input
                                type="text"
                                name="focus"
                                data-provide="slider"
                                data-slider-ticks="[0, 1, 2]"
                                data-slider-ticks-labels='["可以(Q)", "较差(W)", "很差(E)"]'
                                data-slider-min="0"
                                data-slider-max="2"
                                data-slider-step="1"
                                data-slider-value="0"
                                data-slider-tooltip="hide"
                            >
                        </label>
                        <label for="position">
                            舌位质量
                            <input
                                type="text"
                                name="position"
                                data-provide="slider"
                                data-slider-ticks="[0, 1, 2]"
                                data-slider-ticks-labels='["可以(A)", "较差(S)", "很差(D)"]'
                                data-slider-min="0"
                                data-slider-max="2"
                                data-slider-step="1"
                                data-slider-value="0"
                                data-slider-tooltip="hide"
                            >
                        </label>
                    </div>
                    <div class="panel-footer">
                        <input type="submit" class="btn btn-default btn-lg" value="提交(Enter)">
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}